<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Document</title>
  <link rel="stylesheet" href="../../css/member/record.css">
  <link rel="stylesheet" href="../../css/public/base.css">
  <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
  <script src="../../js/public/jquery-3.3.1.js"></script>
</head>
<style>
  .nav_two .left>ul>li:nth-of-type(4){
        background-color: #e5f1fc;
    }
    .nav_two {
        margin-right: 20px;
        height: 100%;
        color: #666;
    }

    .nav_two .left {

        /* text-align: center; */
        /* border: 1px solid #000; */
        background-color: #FFF;
        height: 100%;
        border-radius: 8px;
        font-size: 16px;
        width: 200px;
    }

    .nav_two .left>ul li {
        min-height: 53px;
        line-height: 53px;
        list-style-type: none;
        position: relative;
        cursor: pointer;

    }

    .nav_two .left>ul li a {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .nav_two .left>ul li ul {
        transition: all 0.2s;
        max-height: 0;
        overflow: hidden;
        /* display: none; */
    }

    .nav_two .left>ul li ul li {
        min-height: 53px;
    }

    .nav_two .left>ul li img {
        position: relative;
        left: 30px;
        transition: all 0.2s;
        transform: rotate(180deg);
    }

    .nav_two .active {
        background-color: #e5f1fc;
    }

    .nav_two .left>ul li .bbx {
        max-height: 300px;
    }

    .rotate {
        transform: rotate(0deg) !important;
    }

    .xia ul li{
      padding-left: 20px;
      font-size: 15px;
    }

</style>

<body>
  <form class="layui-form" action="">
 

    <div class="main" >
      <div class="left">
        <div class='nav_two'>
          <div class="left">
              <ul>
                  <li><span class="circle"></span><a href="../member/MemberManagement.html"></a>会员管理</li>
                  <li><span class="circle"></span><a href="../member/mailbox.html"></a>会员信箱</li>
                  <li class='xia'>
                    <span class='xiaspan'><span class="circle"></span>交易额管理 <img src="../../image/xiala.png" alt=""></span>
    
                    <ul>
                      <li><a href="../../html/member/DealImport.html"></a><span class="circle"></span>交易额导入</li>
                      <li><a href="../../html/member/record .html"></a><span class="circle"></span>交易额记录</li>
                    </ul>
                  </li>
                  <li><span class="circle"></span><a href="../member/Upgrade.html"></a>用户升级记录</li>
                  <li><span class="circle"></span><a href="../member/Recommend.html"></a>推荐图谱</li>
                </ul>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label wdStyle">会员账号：</label>
              <input type="text" style="width:196px;" placeholder="请输入…" class="layui-input">
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">账号：</label>
              <input type="text" style="width:196px;" placeholder="请输入…" class="layui-input">
            </div>
            <div class="layui-inline checkStyle">
              <button class="layui-btn btnStyle" lay-submit="" lay-filter="demo1">查询</button>
            </div>
            <div class="layui-inline">
              <button class="layui-btn btnStyle2" lay-submit="" lay-filter="demo1">重置</button>
            </div>
          </div>
        </div>

        <div class="button">
          <table class="layui-table" id="demo" lay-filter="test"></table>
        </div>
        <!-- <div class="paging">
          <div id="demo3"></div>
        </div> -->
      </div>
    </div>
  </form>
  <script src="../../layui/layui.js"></script>
  <script src='../../js/member/member.js'></script>
  <script>
    var t = document.querySelector.bind(document)
    let flag = localStorage.getItem('twonav')
    if (flag == '1') {
      t('.xia>ul').classList.add('bbx')
      t('.xia img').classList.add('rotate')
    }
    t('.xiaspan').onclick = function () {
      flag = flag == 0 ? 1 : 0
      t('.xia>ul').classList.toggle('bbx')
      t('.xia img').classList.toggle('rotate')
      localStorage.setItem('twonav', flag)
    }
  </script>
  <script>
    layui.use('element', function () {
      var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

      //监听导航点击
      element.on('nav(demo)', function (elem) {
        //console.log(elem)
        layer.msg(elem.text());
      });
    });
  </script>
  <script>
    layui.use('form', function () { })

    layui.use('table', function () {
      var table = layui.table;

      table.render({
        elem: '#demo'
        , skin: 'nob'
        , page: true
        , cols: [[
          { type: 'checkbox' }
          , { field: 'id', title: '序号', unresize:true}
          , { field: 'account', title: '会员账号', minWidth: 160 ,unresize:true}
          , { field: 'username', title: '姓名', minWidth: 60 ,unresize:true}
          , { field: 'rank', title: '会员级别(升级前/后)' , minWidth: 160,unresize:true}
          , { field: 'teamrank', title: '团队级别', minWidth: 90 ,unresize:true}
          , { field: 'time', title: '升级时间' , minWidth: 170,unresize:true}
          , { field: 'detail', title: '详细' , minWidth: 150,unresize:true}
        ]]
        , data: [{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        },{
          "id": "01"
          , "account": "12345@123.com"
          , "username": "张三"
          , "rank": "四星会员/普通会员"
          , "teamrank": "无/无"
          , "time": '2018.01.01 18:00:00'
          , "detail": "会员自行升级"
        }]
      });
    });


    layui.use(['laypage', 'layer'], function () {
      var laypage = layui.laypage
        , layer = layui.layer;
      // laypage.render({
      //   elem: 'demo3'
      //   , count: 100
      //   , first: '首页'
      //   , prev: '<em><</em>'
      //   , next: '<em>></em>'
      // });
      laypage.render({
        elem: 'demo3'
        , prev: '<em><</em>'
        , next: '<em>></em>'
        , count: 100
        , layout: ['limit', 'skip', 'prev', 'page', 'next']
        , jump: function (obj) {
          console.log(obj)
        }
      });
    })
  </script>
</body>

</html>